<template>
  <div>
    <div class="pc-1 new1">
      <div style="height: 40px"></div>
      <div class="sc-box">
        <div class="new2"></div>
        <input placeholder="请输入搜索关键词" />
        <div class="s-btn">搜索</div>
      </div>
      <div class="pc-11" style="margin-top:10px">
        <img src="../../assets/news/1.png" alt="" />
        <p>热门搜索</p>
        <div>
          <p v-for="(item, index) in 4" :key="index">人才筛选</p>
        </div>
      </div>
    </div>
    <div class="saix">
      <div class="saix-con saix-1">
        <p>政策级别</p>
        <div class="saix-11">
          <p @click="onTabOne(0)" :class="{ on: curOneIndex == 0 }">不限</p>
          <p @click="onTabOne(1)" :class="{ on: curOneIndex == 1 }">市级</p>
          <p @click="onTabOne(2)" :class="{ on: curOneIndex == 2 }">区县级</p>
        </div>
      </div>
      <div class="saix-con saix-1">
        <p>适用地区</p>
        <div class="saix-12">
          <div>
            <el-select v-model="value" placeholder="请选择" size="small">
              <el-option
                v-for="item in []"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-select v-model="value1" placeholder="请选择县区" size="small">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="saix-con saix-1">
        <p>发文日期</p>
        <div class="saix-11">
          <p @click="onTabTwo(0)" :class="{ on: curTwoIndex == 0 }">不限</p>
          <p @click="onTabTwo(1)" :class="{ on: curTwoIndex == 1 }">近半年</p>
          <p @click="onTabTwo(2)" :class="{ on: curTwoIndex == 2 }">近一年</p>
          <p @click="onTabTwo(3)" :class="{ on: curTwoIndex == 3 }">近三年</p>
        </div>
        <div class="saix-13">
          <el-date-picker
            v-model="value2"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="saix-con saix-1" style="align-items: baseline;">
        <p>政策标签</p>
        <div class="saix-11" style="flex:1;flex-wrap: wrap;">
          <p
            v-for="(item, index) in bqList"
            :key="index"
            @click="onTabThree(index)"
            :class="{ on: curThreeIndex == index }"
            style="margin-bottom:10px"
          >
            {{ item.policyLabel }}
          </p>
        </div>
      </div>
    </div>
    <div class="pc-2">
      <div class="pc-21">
        <div>
          <p>最新发布</p>
          <!-- <p>查看更多>></p> -->
        </div>
        <div>
          <p>相关结果</p>
          <p>3252</p>
          <p>条</p>
        </div>
      </div>
      <div class="pc-22">
        <div v-for="(item, index) in list" :key="index" class="list" @click="onSee(item)">
          <div class="list-1">
            <div>
              <p>{{ item.policyLevel == 1 ? "市级" : "区县" }}</p>
              <p></p>
              <p>{{ item.title }}</p>
            </div>
            <img
              v-if="item.stateSb == 1"
              src="../../assets/news/3.png"
              alt=""
            />
            <img v-else src="../../assets/news/4.png" alt="" />
          </div>
          <div class="list-2">
            <p v-for="(item, index) in item.policyLabelList" :key="index">
              {{ item }}
            </p>
          </div>
          <div class="list-3">
            <p>申报时间：{{ item.beginTime }} 至 {{ item.endTime }}</p>
            <p>发文单位：{{ item.pubishBy }}</p>
            <p>扶持资金：{{ item.fundScope }}</p>
          </div>
          <div class="list-4">
            <div>
              <img src="../../assets/news/5.png" alt="" />
              <p>{{ item.pubdate }}</p>
            </div>
            <div>
              <div>
                <img src="../../assets/news/6.png" alt="" v-if="scState" />
                <img src="../../assets/news/7.png" alt="" v-else />
                <p>收藏</p>
              </div>
              <div>
                <img src="../../assets/news/6.png" alt="" v-if="scState" />
                <img src="../../assets/news/7.png" alt="" v-else />
                <p>订阅</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pc-23">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          prev-text="上一页"
          next-text="下一页"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      curOneIndex: 0,
      options: [
        {
          value: "选项1",
          label: "海州区"
        },
        {
          value: "选项2",
          label: "连云区"
        }
      ],
      value: "连云港市",
      value1: "",
      curTwoIndex: 0,
      value2: "",
      curThreeIndex: 0,
      scState: false,
      bqList: [],

      pageSize: 4,
      currentPage: 1,
      total: 0,
      list: []
    };
  },
  mounted() {
    this.getLaberCountList();
    this.getPolicyList();
  },
  methods: {
    onTabOne(ind) {
      this.curOneIndex = ind;
    },
    onTabTwo(ind) {
      this.curTwoIndex = ind;
    },
    onTabThree(ind) {
      this.curThreeIndex = ind;
    },
    async getLaberCountList() {
      const res = await this.$store.dispatch("user/getLaberCountList", {});
      this.bqList = res.data;
      console.log(res);
    },
    async getPolicyList() {
      const res = await this.$store.dispatch("user/getPolicyList", {
        pageNum: this.currentPage,
        pageSize: 4
      });
      console.log(res);
      this.list = res.rows;
      this.list.forEach((item, index) => {
        item.policyLabelList = item.policyLabel.split(",");
        let date1 = Date.parse(item.beginTime);
        let date2 = Date.parse(new Date());
        let date3 = Date.parse(item.endTime);
        if (date2 > date1 && date2 < date3) {
          item.stateSb = 1;
        } else {
          item.stateSb = 2;
        }
      });
      this.total = res.total;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getPolicyList();
    },
    onSee(param) {
      console.log(param);
      this.$router.push({
        path: "/index/des",
        query: {
          des: JSON.stringify(param)
        }
      });
    }
  }
};
</script>

<style lang="scss">
@import "./index.scss";
</style>
